<template>
  <div>这是APP</div>
  <button @click="goRouter('RouterDemo')">RouterDemo</button>
  <button @click="goRouter('piniaDemo')">piniaDemo</button>
  <button @click="goRouter('computedDemo')">computedDemo</button>
  <button @click="goRouter('watchEffectDemo')">watchEffectDemo</button>
  <button @click="goRouter('test')">test</button>

  <hr />
  <!-- <Preson ref="ren" />-->

  <!-- <watchDemo></watchDemo> -->

  <!-- <computedDemo></computedDemo> -->

  <!-- <watchEffectDemo></watchEffectDemo> -->

  <!-- <RouterDemo></RouterDemo> -->

  <!-- <piniaDemo></piniaDemo> -->

  <!-- <VModeDemo></VModeDemo> -->

  <!-- <soltDemo></soltDemo> -->

  <!-- <axiosDemo></axiosDemo> -->

  <RouterView></RouterView>
</template>

<script setup>
import { useRouter } from 'vue-router'

// import Preson from './views/Preson.vue'
// import watchDemo from './views/watchDemo.vue'
// import watchEffectDemo from './views/watchEffectDemo.vue'
// import propsDemo from './views/propsDemo.vue'
// import RouterDemo from './views/RouterDemo.vue'
// import piniaDemo from './views/piniaDemo.vue'
// import VModeDemo from './views/V-modeDemo.vue'
// import soltDemo from './views/soltDemo.vue'
// import axiosDemo from './views/axiosDemo.vue'

const router = useRouter()
const goRouter = (val) => {
  switch (val) {
    case 'RouterDemo':
      router.push('/RouterDemo')
      break
    case 'piniaDemo':
      router.push('/piniaDemo')
      break
    case 'computedDemo':
      router.push('/computedDemo')
      break
    case 'watchEffectDemo':
      router.push('/watchEffectDemo')
      break
    case 'test':
      router.push('/test')
      break
    default:
      router.push('/')
      break
  }
}
</script>

<style scoped>
button {
  margin: 10px;
}
</style>
